<template>
  <div class="cartcontrol">
    <transition name="move">
      <div class="cart-decrease" v-show="food.count>0" @touchstart.stop.prevent="decreaseCart">
        <span class="inner">-</span>
      </div>
    </transition>
    <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
    <div class="cart-add" @touchstart.stop.prevent="addCart">+</div>
  </div>
</template>

<script>
  export default {
    props: {
      food: {
        type: Object
      }
    },
    methods: {
      addCart(event) {
        if (!this.food.count) {
          this.$set(this.food, 'count', 1);
        } else {
          this.food.count++;
        }
        this.$emit('add', event.target);
      },
      decreaseCart(event) {
        if (this.food.count) {
          this.food.count--;
        }
        this.$emit('add', event.target);
      }
    }
  };
</script>

<style lang='less'>
  .circlebtn{
    width: 0.7rem;
    height: 0.7rem;
    border: 1px solid #999;
    border-radius:50%;
    font-size: 0.7rem;
    color: #cba162;
    display: inline-block;
    text-align: center;
    line-height: 0.7rem;

        vertical-align: center
  }
  .cartcontrol{
    .cart-decrease{
      display: inline-block;
      opacity: 1;
      vertical-align: top;
      transition: all 0.4s linear;
      transform: translate3d(0, 0, 0);       
      &.move-enter-active, &.move-leave-active{
        transition: all 0.4s linear;
      }
      &.move-enter, &.move-leave-active{
        opacity: 0;
        transform: translate3d(24px, 0, 0);
        .inner{
          transform: rotate(180deg);

        }
      }
      .inner{
        .circlebtn();
        line-height: 0.5rem;
      }
    }
    .cart-count{
      display: inline-block;
      vertical-align: top;
      color: red;
      width: 0.7rem;
      padding-top: 0.15rem;
      text-align: center;
      font-size: 0.4rem;
      color: #333;
    }
    .cart-add{
      
      .circlebtn();

    }
}
</style>